<!--
 * @Author: gyc
 * @Date: 2020-06-17 15:51:53
 * @LastEditTime: 2020-08-14 08:27:37
 * @Description: Nuxt测试版
--> 
<template>
  <div class="index-article">
    <div class="index-artlcle-ad" v-if="ishow">
      <h3>暴力推荐</h3>
      <div class="ad-tag2">刀剑神域</div>
      <img :src="hotImg" />
      <div class="ad-tag">2020-7-11</div>
    </div>
    <div class="index-article-left" v-if="ishow">
      <h3 class="article-left-h3">文章分享</h3>
      <div class="index-article-box">
        <div class="article-box-item">
          <article-box v-for="i in 10" :key="i" style="height:30px"></article-box>
        </div>
      </div>
    </div>
    <div class="index-article-right" v-if="ishow">
      <h3>活跃用户</h3>
      <div class="article-box-rank">
        <article-rank></article-rank>
      </div>
    </div>
  </div>
</template>

<script>
import articleBox from "@/components/index/indexArticle/articleBox/box";
import articleRank from "@/components/index/indexArticle/articleRank/rank";
import moment from "moment";
export default {
  name: "indexArticle",
  props: ["ishow"],
  data() {
    return {
      nowTime: "",
      hotImg: ""
    };
  },
  mounted() {
    //获取热门信息
    this.$axios.get("/api/img/getHotUrl").then(res => {
      this.hotImg = res.data.data[0].localUrl;
    });
  },
  components: {
    "article-box": articleBox,
    "article-rank": articleRank
  }
};
</script>

<style lang="scss" scoped>
@media screen and (max-width: 1100px) {
  .index-article {
    width: 100%;
    .index-artlcle-ad {
      display: none;
    }
    .index-article-right {
      display: none;
    }
    .index-article-left {
      width: 100%;
      padding-right: 10px;
      padding-left: 10px;
    }
  }
}
@media screen and (min-width: 1100px) {
  .index-article {
    width: 1100px;
    .index-artlcle-ad {
      display: flex;
    }
    .index-article-right {
      display: inline-block;
    }
    .index-article-left {
      width: 620px;
      padding-right: 20px;
      padding-left: 20px;
    }
  }
}
a:hover {
  color: black;
}
.index-article {
  margin: 30px auto;
  height: 334px;
  display: flex;
  justify-content: center;
  transition: all 0.4s ease-in-out;
  animation: showMoviesBox 0.8s ease-in-out;
  h3 {
    padding-bottom: 10px;
  }
  .index-artlcle-ad {
    position: relative;
    flex-direction: column;
    width: 180px;
    height: 100%;
    transition: all 0.4s ease-in-out;
    animation: showMoviesBox 0.8s ease-in-out;
    overflow: hidden;
    cursor: pointer;
    img {
      width: 180px;
      height: 255px;
      margin-top: 5px;
    }
    p {
      width: 100%;
      text-align: center;
      font-size: 16px;
      color: white;
    }
    .ad-tag {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 28px;
      padding-left: 5px;
      padding-right: 5px;
      background-color: #aaa;
      color: white;
      width: 100%;
    }
    .ad-tag2 {
      position: absolute;
      display: flex;
      top: 40px;
      left: 0;
      width: 80px;
      justify-content: center;
      align-items: center;
      height: 24px;
      padding-left: 5px;
      padding-right: 5px;
      background-color: black;
      color: white;
    }
  }
  .index-article-left {
    transition: all 0.4s ease-in-out;
    animation: showMoviesBox 0.8s ease-in-out;
    .index-article-box {
      display: flex;
      overflow: auto;
      height: auto;
      border-radius: 4px;
      margin: 0 auto;
      width: 100%;
      &::-webkit-scrollbar {
        display: none;
      }
      .article-box-item {
        width: 100%;
        height: 100%;
        h3 {
          display: flex;
          height: 40px;
          align-items: center;
          padding-left: 5px;
        }
      }
    }
  }
  .index-article-right {
    transition: all 0.4s ease-in-out;
    animation: showMoviesBox 0.8s ease-in-out;
    .article-box-rank {
      width: 300px;
    }
  }
}
@keyframes showMoviesBox {
  0% {
    transform: translateY(60px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
</style>